<template>
    <!-- swiper做的分类滑动栏 -->
    <div class="swiper-container navCate">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in list" :key="item.id" @click="navlist(item.catename)">
                <a href="#">{{item.catename}}</a>
                <span></span>
            </div>
            <div class="swiper-slide">
                <a href="#"></a>
                <span></span>
            </div>
        </div>
    </div>
</template>

<script>
//引入swiper
import Swiper from 'swiper'
//引入axios封装的接口
import {getCate} from '../utils/api'
export default {
    data() {
        return {
            list:[]
        };
    },
    methods:{
        navlist(data){
            this.$emit('sortlist',data)
        }
    },
    mounted() {
        //获取首页快速分类导航
        getCate().then(res=>{
            this.list = res.list
            this.$nextTick(()=>{
                new Swiper('.navCate', {
                    slidesPerView: 5,
                    // spaceBetween: 30,
                    // loop:true,
                });
            })
        }).catch(err=>{
            console.log(err);
        })
    },
};
</script>

<style  scoped>
/* 引入swiper的css */
@import '../../node_modules/swiper/css/swiper.min.css';

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 0.18rem;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
</style>